import React, { Component } from 'react';
import { StyleSheet } from "react-native";

import { Slider ,ListItem } from 'react-native-elements'
import Sound from 'react-native-sound'




/*let whoosh = new Sound(musicList[0].src, null, (error) => {
    if (error) {
        return console.log('资源加载失败', error);
    }

});*/


export default class Play extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            volume: 0.5,
            seconds: 0, //秒数
            totalMin: '', //总分钟
            totalSec: '', //总分钟秒数
            nowMin: 0, //当前分钟
            nowSec: 0, //当前秒钟
            maximumValue: 0, //滑块最大值
        }
    }

    componentDidMount(){
/*
        let totalTime = whoosh.getDuration();
        totalTime = Math.ceil(totalTime);
        setInterval(()=>{
            console.log(totalTime)
        },1000)
        let totalMin = parseInt(totalTime/60); //总分钟数
        let totalSec = totalTime - totalMin * 60; //秒钟数并判断前缀是否 + '0'
        totalSec = totalSec > 9 ? totalSec : '0' + totalSec;
        this.setState({
            totalMin,
            totalSec,
            maximumValue: totalTime,
        })*/
    }
    componentWillUnmount(){
/*        this.time && clearTimeout(this.time);*/
    }
    // 声音+
    _addVolume = () => {
        let volume = this.state.volume;
        volume += 0.1;
        volume = parseFloat(volume).toFixed(1) * 1;
        if(volume > 1){
            return alert('目前已经是最大音量');
        }
        this.setState({volume: volume});
        whoosh.setVolume(volume);
    }
    // 声音-
    _reduceVolume = () => {
        let volume = this.state.volume;
        volume -= 0.1;
        volume = parseFloat(volume).toFixed(1) * 1;
        if(volume < 0){
            return alert('当前为静音');
        }
        this.setState({volume: volume});
        whoosh.setVolume(volume);
    }
    // 播放
    _play = () => {
        whoosh.play();
        this.time = setInterval(() => {
            whoosh.getCurrentTime(seconds => {
                seconds = Math.ceil(seconds);
                this._getNowTime(seconds)
            })
        },1000)
    }
    // 暂停
    _pause = () => {
        clearInterval(this.time);
        whoosh.pause();
    }
    // 停止
    _stop = () => {
        clearInterval(this.time);
        this.setState({
            nowMin: 0,
            nowSec: 0,
            seconds: 0,
        })
        whoosh.stop();
    }
    _getNowTime = (seconds) => {
        let nowMin = this.state.nowMin,
            nowSec = this.state.nowSec;
        if(seconds >= 60){
            nowMin = parseInt(seconds/60); //当前分钟数
            nowSec = seconds - nowMin * 60;
            nowSec = nowSec < 10 ? '0' + nowSec : nowSec;
        }else{
            nowSec = seconds < 10 ? '0' + seconds : seconds;
        }
        this.setState({
            nowMin,
            nowSec,
            seconds
        })
    }
    render() {
        let time = this.state;

        return (

          {/*  <View style={styles.container}>
                <Slider
                    // disabled //禁止滑动
                    maximumTrackTintColor={'#ccc'} //右侧轨道的颜色
                    minimumTrackTintColor={'skyblue'} //左侧轨道的颜色
                    //maximumValue={this.state.maximumValue} //滑块最大值
                    minimumValue={0} //滑块最小值
                    value={this.state.seconds}
                    onSlidingComplete={(value)=>{ //用户完成更改值时调用的回调（例如，当滑块被释放时）
                        value = parseInt(value);
                        this._getNowTime(value)
                        // 设置播放时间
                        whoosh.setCurrentTime(value);
                    }}
                />
                <Text>{time.nowMin}:{time.nowSec}/{time.totalMin}:{time.totalSec}</Text>
                <Text>当前音量: {this.state.volume}</Text>
                <Text onPress={this._addVolume}>声音+</Text>
                <Text onPress={this._reduceVolume}>声音-</Text>
                <Text onPress={this._play}>播放</Text>
                <Text onPress={this._pause}>暂停</Text>
                <Text onPress={this._stop}>停止</Text>


            </View>*/}
        );
    }

}


const styles = StyleSheet.create({
    loadingBox: { // Loading居中
        flex:1,
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:'rgba(0, 0, 0, 0.5)', // 半透明
    }
});
